<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="设置多属性图"
    width="800"
    draggable
    @close="close"
    :z-index="2000"
  >
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <el-select
          v-model="form.image_source"
          class="m-2 !w-[160px]"
          placeholder="请选择"
          disabled
        >
          <el-option
            v-for="item in options['gallery.GoodsSkuGalleryContents']?.[0].imageTypeText"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          style="width: 268px"
          v-model="form.keyword"
          placeholder="图片名称"
        ></el-input>
        <el-button style="background-color: #fafafa" :icon="Search" @click="computedImage"
          >查询</el-button
        >
      </div>
      <div>
        <el-button type="primary" class="flex items-center" @click="handleOpen">
          <svg-icon class="text-sm mr-2" icon-class="Plus"></svg-icon>
          上传图片
        </el-button>
      </div>
    </div>

    <div class="border mt-2 flex flex-wrap pt-4 pl-4 pb-2 upload-box">
      <template v-if="multiattributeImg.length">
        <div
          class="w-28 mr-4 mb-6"
          v-for="(item, index) in multiattributeImg"
          :key="item.url"
        >
          <div class="bg-gray-300 mb-2 relative w-28 h-28">
            <el-checkbox
              v-model="item.checked"
              label=""
              :true-label="1"
              :false-label="0"
              class="absolute right-0.5 -top-2"
              size="large"
            />
            <VImage
              :src="item.image_link"
              :width="112"
              :height="112"
              :previewlist="photoSort(item, multiattributeImg)"
            >
            </VImage>
            <div class="line1">{{ item.image_name }}</div>
          </div>
          <div class="line1 text-xs">{{ item.name }}</div>
        </div>
      </template>
    </div>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save()">保 存</el-button>
      </div>
    </template>
  </el-dialog>
  <NativeUpload ref="nativeRef" @uploadFile="uploadFile"></NativeUpload>
</template>
<script setup name="NativeUpload">
import VImage from "@/components/Image/index.vue";
import { ElMessage } from "element-plus";
import { computed, ref, toRefs } from "vue";
import NativeUpload from "../Picture/components/NativeUpload";
import { photoSort } from "@/utils/index";

const props = defineProps({
  customTag: {
    type: String,
    default: () => "",
  },
});
const emits = defineEmits(["uploadFile"]);
let formData = reactive(inject("form"));
let options = reactive(inject("options"));

const computedImage = () => {
  let list = [];
  goods_sku_gallery.value[0].contents.forEach((i) => {
    if (i.image_type == form.value.image_source) {
      list = i.values.filter((j) => {
        if (!form.value.keyword || j.image_name.indexOf(form.value.keyword) != -1) {
          return j;
        }
      });
    }
  });
  multiattributeImg.value = list;
};

const imageType = ref(0);
const loading = ref(false);
const visible = ref(null);
const imageSKU = ref(null);

const data = reactive({
  form: {
    image_source: 3,
  },
  multiattributeImg: [],
  goods_sku_gallery: [],
  load: false,
});
const { form, multiattributeImg, goods_sku_gallery, load } = toRefs(data);

const checkedList = () => {
  multiattributeImg.value.length &&
    multiattributeImg.value.forEach((i) => {
      i.checked =
        fileList.value.length &&
        fileList.value.findIndex((j) => j.img_url == i.image_link) != -1;
    });
};

const open = async (type, item) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  fileList.value = item.goods_sku_attr_img || [];
  goods_sku_gallery.value = item.goods_sku_gallery || [];
  await computedImage();
  await checkedList();
  visible.value = true;
  imageType.value = type;
};
const fileList = ref([]);

const close = () => {
  visible.value = false;
};

const nativeRef = ref();
const handleOpen = (imageType, imageSource) => {
  nextTick(() => {
    nativeRef.value.open(3, imageSource);
  });
};

const uploadFile = (fileList, imageType) => {
  nextTick(() => {
    goods_sku_gallery.value[0].contents.forEach((item) => {
      if (item.image_type === imageType) {
        item.values.push(...fileList);
      }
    });
    computedImage();
  });
};

const save = () => {
  const fileList = multiattributeImg.value.filter((i) => i.checked);
  if (!fileList.length) return ElMessage.error(`至少选择一张图片`);
  emits("uploadFile", fileList);
  close();
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.typeList {
  display: flex;
  justify-content: space-between;
}

.imageClass {
  border-radius: 4px;
  border: 1px solid #e6e7e9;
  flex: auto;
  margin: 16px 8px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.active {
  background: rgba(51, 102, 241, 0.06);
  border: 1px solid #3366f1;
}

.activeIcon {
  background: #3366f1;
  display: flex;
  justify-content: center;
  align-items: center;

  .icon {
    position: absolute;
    color: #fff;
    display: inline-block;
    margin: auto;
  }
}

.upload-demo {
  :deep(.el-upload--picture) {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

.upload-box {
  min-height: 200px;
}
</style>
